<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="my.css">

<title>我的网站</title>

</head>

<body>
  <div id="myPopup" class="myPopup">
  </div>
  <header>
    <h1>
      这是我的网页头部
    </h1>
  </header>
<article>
<div class="content">
<menu>
<ul>
<li><a href="#" onclick="ajaxLoad('linkpage1.html','myCnt')">载入表格页面</a></li>
<li><a href="#" onclick="ajaxLoad('linkpage2.html','myCnt')">载入表单页面</a></li>
<li><a href="#" onclick="ajaxLoad('linkpage3.html','myCnt')">带按钮可弹出页面</a></li>
<li><a href="#" onclick="ajaxLoad('linkpage4.html','myCnt')">任意载入的页面</a></li>
</ul>
</menu>
<section id="myCnt">
</section>
</div>
</article>
<footer>
<h1>
这是我的网页尾部
</h1>
</footer>
</body>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
  // 初次进入网站时的默认页面载入
     window.onload=ajaxLoad("home.html","myCnt");
     // 下面的这些只是和鼠标在menu上刷新有关，与ajax选择无关
    $("ul li").click(function(){
        $(this).children("a").addClass("active");
        if($(this).siblings("li").children("a").hasClass("active"))
       {
            $(this).siblings("li").children("a").removeClass("active");
       }
    });
});

// ajax调用实现异步更新
function ajaxLoad(myUl,myId)
{
     var xmlhttp;
     if (window.XMLHttpRequest)
    {
         // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
         xmlhttp=new XMLHttpRequest();
     }
      else
    {
         // IE6, IE5 浏览器执行代码
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
      xmlhttp.onreadystatechange=function()
     {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
               document.getElementById(myId).innerHTML=xmlhttp.responseText;
               if(myId=="myPopup")
              {
                     document.getElementById("myPopup").style.display='block';
               }
          }
     }
      xmlhttp.open("GET",myUl,true);
      xmlhttp.send();
}

function myClose()
{
      document.getElementById("myPopup").style.display='none';
}
</script>
</html>